<template>
  单个新增
  <div style="max-width: 900px">
    <el-form ref="itemAdd" :model="item" :rules="rules" label-width="120px">
      <!-- 商品名 -->
      <el-form-item label="商品名" prop="itemName">
        <el-input v-model="item.itemName" />
      </el-form-item>
      <!-- 商品价格 -->
      <el-form-item label="商品价格" prop="price">
        <el-input-number v-model="item.price" min="0" />
      </el-form-item>
      <!--所属分类  -->
      <el-form-item label="所属分类" prop="cateId">
      <!-- 级联选择器 el-cascader -->
        <el-cascader
          v-model="item.cateId"
          :options="cates" :props="{
            checkStrictly: true,
            label: 'cateName',
            value: 'id',
            emitPath: false
          }" clearable />
      </el-form-item>
      <!-- 是否在售 -->
      <el-form-item label="是否在售" prop="onsale">
        <el-switch v-model="item.onsale" inline-prompt active-text="在售" inactive-text="下架"/>
      </el-form-item>
      <!-- 上传icon 商品封面 -->
      <el-form-item label="商品封面">
        <el-upload
          ref="uploadRef"
          action="/api/upload"
          name="file"
          accept=".jpg,.png,.gif"
          :data="{ a: 1022, b: 22220 }"
          :on-success="uploadSuccess">
              <el-button type="primary">选择文件</el-button>
        </el-upload>
        <img :src="item.thumb" width="100" alt="">
      </el-form-item>
      <!-- 商品描述 -->
      <el-form-item label="商品描述" prop="desc">
        <el-input type="textarea" v-model="item.desc" min="0" />
      </el-form-item>
      <!-- 商品详情 富文本编辑器 -->
      <el-form-item label="商品详情">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 300px; overflow-y: hidden;"
            v-model="item.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
        </div>
      </el-form-item>
      <!-- 新增 重置 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onChangeUpdate" style="background: green">确定修改</el-button>
        <el-button @click="resetForm"  type="danger">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { fetchCates } from '@/api/cateLists'
import { updateItems, getItemDetail } from '@/api/itemUpdate'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'ItemUpdate',
  data () {
    return {
      item: {
        itemName: '',
        price: 0,
        onsale: false,
        desc: '',
        thumb: '',
        cateId: 1,
        content: ''
      },
      cates: [],

      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            server: '/api/upload',
            filename: 'file',
            customInsert: (res, insertFn) => {
              if (res.code === 200) {
                insertFn(res.data.url)
              }
            }
          }
        }
      },
      mode: 'default',

      rules: {
        itemName: [
          {
            required: true,
            message: '商品名必填'
          }
        ],
        price: [
          {
            required: true,
            message: '商品价格必填'
          }
        ],
        onsale: [
          {
            required: true,
            message: '上下架必选'
          }
        ],
        cateId: [
          {
            required: true,
            message: '所属分类必填'
          }
        ]
      }
    }
  },
  methods: {
    fetchItems () {
      getItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          this.item = res.data.data
        }
      })
      console.log(this.$route.query.id, '33333')
    },
    // 编辑器必须使用
    onCreated (editor) {
      this.editor = Object.seal(editor)
    },
    fetchCates () {
      fetchCates().then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
        console.log(this.cates)
      })
    },
    uploadSuccess (res) {
      if (res.code === 200) {
        this.item.thumb = res.data.url
        this.$message({
          type: 'success',
          message: res.msg
        })
      }
    },
    onChangeUpdate () {
      this.$refs.itemAdd.validate().then(() => {
        updateItems(this.item).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              duration: 2000,
              message: res.data.msg,
              onClose: () => {
                // 回到商品列表中
                this.$router.replace('/itemLists')
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '表单校验不通过'
        })
      })
    },
    resetForm () {
      this.$refs.itemAdd.resetFields()
    }
  },
  created () {
    this.fetchCates()
    this.fetchItems()
  },
  components: {
    Editor,
    Toolbar
  }
}

</script>

<style lang="scss" scoped>

</style>
